<template>
    <div>
       <div class="header1" style="text-align: center;font-weight: 700;">
       	<p >用户资料</p>
       	<!-- <el-divider content-position="right"> -->
       	</el-divider>
       </div>
       <div class="content1" style="margin-top: 0;" v-loading="loading">
          <el-table
       		 :data="userData"
       		 style="width: 100%"
       		 stripe
			 :default-sort = "{prop: 'id'}"
       		 border>
       		 <el-table-column
       		   prop="id"
       		   label="ID"
       		   width="100"
			    sortable
			   >
       		 </el-table-column>
       		 <el-table-column
       		   prop="pos"
       		   label="职位"
			   sortable>
       		 </el-table-column>
			 <el-table-column
			   prop="name"
			   label="姓名"
			   sortable>
			 </el-table-column>
       		 <el-table-column
       		   prop="major"
       		   label="头像"
       		   width="65px">
				<el-avatar size="20" slot-scope="scope" :src="scope.row.avatar"></el-avatar>
       		  
       		 </el-table-column>
       		
       		 <el-table-column
       		   prop="userName"
       		   label="昵称">
       		 </el-table-column>
       		 <el-table-column
       		   prop="sex"
       		   label="性别"
       		   width="60px">
       		 </el-table-column>
       		 <el-table-column
       		   prop="connect"
       		   label="联系方式">
       		 </el-table-column>
       		 <el-table-column
       		   prop="stuId"
       		   label="学号"
       		   width="120px">
       		 </el-table-column>
       		 <el-table-column
       		   prop="academy"
       		   label="学院">
       		 </el-table-column>
       		 <el-table-column
       		   prop="major"
       		   label="专业">
       		 </el-table-column>
       		 <el-table-column
       		   prop="createTime"
       		   label="注册时间"
       		   width="140px">
       		 </el-table-column>
       		 <el-table-column
       		   prop="lastLoginTime"
       		   label="上次登录时间"
       		   width="140px">
       		 </el-table-column>
       		 <el-table-column
       			   fixed="right"
       			   label="操作"
       			   width="120">
       			   <template slot-scope="scope">
       				   <el-tooltip content="提升权限" placement="top" style="">
       						<el-button type="text" style="font-size: 25px;color: #42B983;" size="medium" class="el-icon-circle-plus" circle @click="authorize(scope.row.id,scope.row.perms,1)"></el-button>											   
       					</el-tooltip>
       				   <el-tooltip content="降低权限" placement="top">
       						<el-button type="text"  style="font-size: 25px; margin-left: 0px;color: orangered;" size="medium" class="el-icon-remove" circle @click="authorize(scope.row.id,scope.row.perms,-1)"></el-button>
       					</el-tooltip>
       					
       			   </template>
       			 </el-table-column>
       	   </el-table>
       	   <el-row  class="">
       	   	<el-col :span="24" style="text-align: center;">
       	   		<div style="margin-top:2%;margin-bottom: 2%;;">
       	   		<el-pagination
       	   			@current-change="getUser"
       	   			background
       	   			page-size="10"
       	   			layout="prev, pager,next "
       	   			:total="total">
       	   		</el-pagination>
       	   		</div>
       	   	</el-col>
       	    </el-row>		
       </div>
       
    </div>
</template>

<script>
	
	
export default {
	
    props:{
    	 proForm:{
    	        type:Object 
    	    },
    },
   
    data:function () {
		
        
		return{
			userData:[{
				}
			],
			total:10,
			loading:false,
			}
	},
    
    
    methods:{
		authorize:function(id,perms,n){
			
			if(id === "studio5704@outlook.com"){
				this.$message.error('不允许对超级管理员操作');
			}else if(perms === 2 && this.$GLOBAL.userId !== "studio5704@outlook.com"){
				this.$message.error('非超级管理员，不允许对管理员操作');
			}else if(perms + n < -1){
				this.$message.error('已经为最低权限');
			}else if(perms + n > 2){
				this.$message.error('已经为最高权限');
			}else{
				this.$confirm('确认操作？', '确认信息', {
					distinguishCancelAndClose: true,
					confirmButtonText: '确认',
					cancelButtonText: '取消'
				}).then(async () => {
					perms += n
					let res = await this.text(this.$api.authorzeUser +"?userId=" + id+ "&perms="+ perms)
						
						if (res.code === 200) {
							this.$message({
								message: '操作成功',
								type: 'success'
								});
								location.reload()
						}else if (res.code === 50014) {
					
							this.$message.error('用户权限不足');
						}else{
							this.$message.error('请求失败或者接口返回失败');
						}
				})
			}
		},
		getUser: async function(n){
			this.loading = true;
			
			let res = await this.text(this.$api.getNumUser)
				
				if (res.code === 200) {
					this.total = res.data.num
					
				}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
					this.$message.error('请求失败或者接口返回失败');
				}
			
			this.userData.length = 0
			let b = (n-1) * 10
			let e = n * 10
			res = await this.text(this.$api.showManyUser+"?page="+b+"&num="+e)
			 
			if (res.code === 200) {
				console.log(res)
				res.data.forEach(e=>{
					let pos = "普通用户"
					if (e.perms === 1) {
					    pos = "工作室成员"
					}else if(e.perms === 2){
					     pos = "管理员"
					}else if(e.perms === -1){
					     pos = "黑名单用户"
					}
					if(e.id === "studio5704@outlook.com"){
						pos = "超级管理员"
					}
					this.userData.push({
						name : e.name,
						id : e.id,
						sex : e.sex,
						academy : e.academy,
						major : e.major,
						stuId : e.stuId,
						userName : e.userName,
						introduction : e.introduction,
						academy : e.academy,
						major : e.major,
						connect : e.connect,
						pos:pos,
						perms:e.perms,
						createTime:this.$dateFormat(e.createTime),
						lastLoginTime:this.$dateFormat(e.lastLoginTime),
						avatar:this.$api.picTemplate+e.avatar
					})
				})
			 // 
			}else if (res.code === 50014) {
					this.$message.error('用户权限不足');
			}else{
				this.$message.error('请求失败或者接口返回失败');
			}
			
			this.loading = false
		}
            
        
    },
	created() {
		if(!this.$GLOBAL.isAdmin){
			this.$router.push("login")
			this.$message.error('用户权限不足');
		}else{
			
			this.getUser(1)
		}
	}
}
</script>

<style scoped>
  @import url("../assets/style/admin.css");
</style>